<template>
  <div class="main-contain">
    <div class="contain-header">
      <div class="header-left">
        <div class="left-name">
          <el-input v-model="ruleForm.name"></el-input>
        </div>
      </div>
      <div class="header-right">
        <el-button size="mini" type="primary" class="el-icon-view" @click="update"> 预览</el-button>
      </div>
    </div>
    <div class="contain-content">
      <dmavon-editor :content.sync="ruleForm.content" render="value" />
    </div>
  </div>
</template>

<script>
import dmavonEditor from '@/components/mavonEditor'
export default {
  components: {
    dmavonEditor
  },
  props: {
    type: {
      type: String
    },
    currentDoc: {
      type: Object
    }
  },
  data () {
    return {
      ruleForm: {}
    }
  },
  created() {
    this.ruleForm = this.currentDoc
  },
  methods: { 
    detaliInfo () { // 根据id获取详情
      this.$API({
        name: 'DetailProjectDocument',
        paths: [this.currentDoc.id],
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          this.$emit('update:currentDoc', res.data.data)
          this.$emit('update:type', 'preview')
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      })
    },
    update() { // 编辑
      this.loading = true
      const params = {
        id: this.ruleForm.id,
        pid: this.ruleForm.pid,
        name: this.ruleForm.name,
        content: this.ruleForm.content
      }
      this.$API({
        name: 'UpdateProjectDocument',
        data: params,
        requireAuth: true
      }).then(res => {
        if (res.data.code === 200 && res.data.data[0] === 1) {
          this.detaliInfo()
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/ .v-note-wrapper {
  border: 0;
}
/deep/ .el-input__inner {
  border: 0;
  width: 500px;
}
.doc-main .main-contain .contain-header {
  background: #fff;
}
</style>